Buefy — Customize Table

Buefy is a UI framework that’s based on Bulma.

In this article, we’ll look at how to use Buefy in our Vue app.

Checkable Rows

We can add the checkable prop to make the rows checkable.

To do that, we write:

<template>
  <div id="app">
    <b-table
      :data="data"
      :columns="columns"
      :checked-rows.sync="checkedRows"
      :is-row-checkable="(row) => row.id !== 3 "
      checkable
      checkbox-position="left"
    >
      <template slot="bottom-left">
        <b>Total checked</b>
        : {{ checkedRows.length }}
      </template>
    </b-table>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    const data = [
      {
        id: 1,
        first_name: "james",
        last_name: "smith"
      },
      {
        id: 2,
        first_name: "mary",
        last_name: "jones"
      },
      {
        id: 3,
        first_name: "alex",
        last_name: "wong"
      }
    ];
    return {
      checkedRows: [],
      data,
      columns: [
        {
          field: "id",
          label: "ID",
          width: "40",
          numeric: true
        },
        {
          field: "first_name",
          label: "First Name"
        },
        {
          field: "last_name",
          label: "Last Name"
        }
      ]
    };
  }
};
</script>

The checkbox-position sets the checkbox position.

is-row-checkable lets us set which rows are checkable with a function. The row parameter is a row object we check.

checked-rows has an array of checked rows.

Searchable

We can add the searchable property to our column objects to make the column searchable.

For example, we can write:

<template>
  <div id="app">
    <b-table :data="data">
      <template v-for="column in columns">
        <b-table-column :key="column.id" v-bind="column">
          <template slot="searchable" slot-scope="props">
            <b-input v-model="props.filters[props.column.field]" placeholder="Search..."/>
          </template>
          <template v-slot="props">{{ props.row[column.field] }}</template>
        </b-table-column>
      </template>
    </b-table>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    const data = [
      {
        id: 1,
        first_name: "james",
        last_name: "smith"
      },
      {
        id: 2,
        first_name: "mary",
        last_name: "jones"
      },
      {
        id: 3,
        first_name: "alex",
        last_name: "wong"
      }
    ];
    return {
      checkedRows: [],
      data,
      columns: [
        {
          field: "id",
          label: "ID",
          width: "40",
          numeric: true
        },
        {
          field: "first_name",
          label: "First Name",
          searchable: true
        },
        {
          field: "last_name",
          label: "Last Name",
          searchable: true
        }
      ]
    };
  }
};
</script>

We will see a search box on any column that has the searchable property set to true .

The search box is added by populating the searchable slot with our own search box.

props.filters[props.column.field] is the search term that Buefy will look for.

Pagination and Sorting

We can add pagination with the paginated and per-page props:

<template>
  <div id="app">
    <b-table :data="data" :columns="columns" paginated :per-page="2"></b-table>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    const data = [
      {
        id: 1,
        first_name: "james",
        last_name: "smith"
      },
      {
        id: 2,
        first_name: "mary",
        last_name: "jones"
      },
      {
        id: 3,
        first_name: "alex",
        last_name: "wong"
      }
    ];
    return {
      data,
      columns: [
        {
          field: "id",
          label: "ID",
          width: "40",
          numeric: true
        },
        {
          field: "first_name",
          label: "First Name"
        },
        {
          field: "last_name",
          label: "Last Name"
        }
      ]
    };
  }
};
</script>

We add the paginated prop to enable pagination.

And we set the per-page prop to set the number of items per page.

To add sorting, we can add the default-sort prop and the sortable property to the column to make a column sortable:

<template>
  <div id="app">
    <b-table :data="data" :columns="columns" default-sort="first_name" default-sort-direction="asc"></b-table>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    const data = [
      {
        id: 1,
        first_name: "james",
        last_name: "smith"
      },
      {
        id: 2,
        first_name: "mary",
        last_name: "jones"
      },
      {
        id: 3,
        first_name: "alex",
        last_name: "wong"
      }
    ];
    return {
      data,
      columns: [
        {
          field: "id",
          label: "ID",
          width: "40",
          numeric: true
        },
        {
          field: "first_name",
          label: "First Name",
          sortable: true
        },
        {
          field: "last_name",
          label: "Last Name",
          sortable: true
        }
      ]
    };
  }
};
</script>

Conclusion

We can add pagination, make the rows checkable, and make columns sortable with Buefy.